<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[100, 200, 300, 400]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
  >
  </el-pagination>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  setup(props) {
    let currentPage4 = ref(4);
    const handleSizeChange = (val) => {
      console.log(`每页 ${val} 条`);
    };
    const handleCurrentChange = (val) => {
      currentPage4.value = val;
      console.log(`当前页: ${val}`);
    };
    return {
      currentPage4,
      handleCurrentChange,
      handleSizeChange,
    };
  },
};
</script>

<style  scoped>
.el-pagination {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}
</style>
